<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control " content="no-cache,must-revalidate">
    <meta name="description" content="">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <title>移动端瀑布流</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<div class="container">
        <div class="banner">
            <!-- <p class="guide">点击这里切换类型</p> -->
        </div>
		<div class="content">
            <div class="wf-item">
                <img src="./resource/images/dota-4.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-15.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-23.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-1.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-7.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-8.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-9.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-10.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-20.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-17.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-14.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-2.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-12.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-13.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-3.jpg"/>
            </div>
            <div class="wf-item">
                <img src="./resource/images/dota-6.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-24.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-11.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-16.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-18.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-19.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-5.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-21.jpg"/>
            </div>
            <div class="wf-item" >
                <img src="./resource/images/dota-22.jpg"/>
            </div>
        </div>
        <div class='load-more'>加载更多</div>
	</div>
</body>
<script src="js/waterfall.js"></script>
<script src="js/index.js"></script>
</html>